<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<title></title>

	<link
		href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,400italic,700,800'
		rel='stylesheet' type='text/css' />
	<link href='http://fonts.googleapis.com/css?family=Raleway:300,200,100'
		rel='stylesheet' type='text/css' />

	<!-- Bootstrap core CSS -->
	<link href="js/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css"
		href="js/bootstrap.switch/bootstrap-switch.css" />
	<link rel="stylesheet" type="text/css"
		href="js/bootstrap.datetimepicker/css/bootstrap-datetimepicker.min.css" />

	<!-- Select2 -->
	<link rel="stylesheet" type="text/css"
		href="js/jquery.select2/select2.css" />


	<!-- Slider -->
	<link rel="stylesheet" type="text/css"
		href="js/bootstrap.slider/css/slider.css" />

	<!-- Custom styles for this template -->
	<link href="css/style.css" rel="stylesheet" />

	<link rel="stylesheet"
		href="fonts/font-awesome-4/css/font-awesome.min.css" />
	<link rel="stylesheet" href="css/pygments.css" />

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
	<link rel="stylesheet" type="text/css"
		href="js/jquery.nanoscroller/nanoscroller.css" />


	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>

<h:body>

	<p:growl id="growl" showDetail="false" sticky="true" globalOnly="true"
		life="2000" autoUpdate="true" />

	<!-- Fixed navbar -->
	<div id="head-nav" class="navbar navbar-default navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
				<a class="navbar-brand" href="#"><span>Minhas Finanças</span></a>
			</div>
			<div class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-right user-nav">
					<li class="dropdown profile_menu"><a href="#"
						class="dropdown-toggle" data-toggle="dropdown"><img
							alt="Avatar" src="images/avatar2.jpg" /> <h:outputText
								value="#{usuarioBean.nome}"></h:outputText> <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<h:form id="frmLogin">
								<li><h:outputLink id="outLinkMinhaConta" value="#">Meu Perfil</h:outputLink></li>
								<li class="divider"></li>
								<li><h:commandLink id="cmdLinkSair"
										action="#{usuarioBean.logout}">Sair</h:commandLink></li>
							</h:form>
						</ul>
						<div class="nano nscroller">
							<div class="content"></div>
						</div></li>
				</ul>
				<ul class="nav navbar-nav navbar-right not-nav">
				</ul>

			</div>
			<!--/.nav-collapse -->
		</div>
	</div>

	<div id="cl-wrapper">
		<div class="cl-sidebar">
			<div class="cl-toggle">
				<i class="fa fa-bars"></i>
			</div>
			<div class="cl-navblock">
				<ul class="cl-vnavigation">
					<li><h:outputLink id="outLinkInicio" value="index.xhtml">
							<i class="fa fa-home"></i>Inicio</h:outputLink></li>
					<li><a href="#"><i class="fa fa-smile-o"></i>Conta</a>
						<ul class="sub-menu">
							<li><h:outputLink id="outLinkNovaConta"
									value="nova-conta.xhtml">Nova Conta</h:outputLink></li>
							<li><h:outputLink id="outLinkListarContas"
									value="listar-contas.xhtml">Listar Contas</h:outputLink></li>
							<li><h:outputLink id="outLinkTransferencia"
									value="transferencia-conta.xhtml">Transferência</h:outputLink></li>
						</ul></li>
					<li><a href="#"><i class="fa fa-list-alt"></i>Receita</a>
						<ul class="sub-menu">
							<li><h:outputLink id="outLinkNovaReceita"
									value="nova-receita.xhtml">Nova Receita</h:outputLink></li>
							<li><h:outputLink id="outLinkListarReceita" value="listar-receitas.xhtml">Listar Receitas</h:outputLink></li>
							<li><h:outputLink id="outLinkTipoReceita" value="#">Tipo Receita</h:outputLink></li>
						</ul></li>
					<li><a href="#"><i class="fa fa-table"></i>Despesa</a>
						<ul class="sub-menu">
							<li><h:outputLink id="outLinkNovaDespesa" value="#">Nova Despesa</h:outputLink></li>
							<li><h:outputLink id="outLinkListarDespesa" value="#">Listar Despesas</h:outputLink></li>
							<li><h:outputLink id="outLinkTipoDespesa" value="#">Tipo Despesa</h:outputLink></li>
						</ul></li>
					<li><h:outputLink id="outLinkExtrato" value="#">
							<i class="fa fa-map-marker nav-icon"></i>Extrato</h:outputLink></li>
				</ul>
			</div>
		</div>

		<div class="container-fluid" id="pcont">
			<div class="page-head">

				<h2>
					<h:outputText value="#{empty titulo ? 'Blank Page' : titulo}" />
				</h2>
			</div>

			<div class="cl-mcont">
				<div class="col-md-12">
					<div class="block-flat">
						<div class="header">
							<h3>
								<h:outputText id="outHeaderPage"
									value="#{empty tituloPagina ? 'Blank Page' : tituloPagina}" />
							</h3>
						</div>

						<div class="content">

							<ui:insert name="cont">

							</ui:insert>
						</div>
					</div>

				</div>
			</div>
		</div>

	</div>

	<script src="js/jquery.js"></script>
	<script type="text/javascript"
		src="js/jquery.nanoscroller/jquery.nanoscroller.js"></script>
	<script type="text/javascript"
		src="js/jquery.sparkline/jquery.sparkline.min.js"></script>
	<script type="text/javascript"
		src="js/jquery.easypiechart/jquery.easy-pie-chart.js"></script>
	<script src="js/jquery.ui/jquery-ui.js" type="text/javascript"></script>
	<script type="text/javascript"
		src="js/jquery.nestable/jquery.nestable.js"></script>
	<script type="text/javascript"
		src="js/bootstrap.switch/bootstrap-switch.min.js"></script>
	<script type="text/javascript"
		src="js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
	<script src="js/jquery.select2/select2.min.js" type="text/javascript"></script>
	<script src="js/bootstrap.slider/js/bootstrap-slider.js"
		type="text/javascript"></script>
	<script type="text/javascript"
		src="js/jquery.gritter/js/jquery.gritter.min.js"></script>
	<script type="text/javascript" src="js/behaviour/general.js"></script>
	<script type="text/javascript" src="js/jquery.mask.min.js"></script>

	<script type="text/javascript">
		$(document).ready(function() {
			//initialize the javascript
			App.init();
		});
	</script>

	<script type="text/javascript">
		$(document).ready(function() {
			funcMask();
		});
		function funcMask() {
			$('.money').mask('000.000.000.000.000,00', {
				reverse : true
			});
		}
	</script>
	<script type="text/javascript">
		function handleLoginRequest(xhr, status, args) {
			if (args.inptTitulo) {
				PF('dlg').hide();
				$('#loginLink').fadeOut();
			}
		}

		function validate(evt) {
			var theEvent = evt || window.event;
			var key = theEvent.keyCode || theEvent.which;
			key = String.fromCharCode(key);
			var regex = /[0-9]|\./;
			if (!regex.test(key)) {
				theEvent.returnValue = false;
				if (theEvent.preventDefault)
					theEvent.preventDefault();
			}
		}
	</script>


	<!-- Bootstrap core JavaScript
================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="js/bootstrap/dist/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/jquery.flot/jquery.flot.js"></script>
	<script type="text/javascript" src="js/jquery.flot/jquery.flot.pie.js"></script>
	<script type="text/javascript"
		src="js/jquery.flot/jquery.flot.resize.js"></script>
	<script type="text/javascript"
		src="js/jquery.flot/jquery.flot.labels.js"></script>

</h:body>

</html>